<template>
  <div>
    <el-select
      v-model="provinceSelected"
      @change="selectOneProvince"
      value-key="code"
      placeholder="请选择所在省份"
      :class="{'display-none':hideProvinceSelect}"
      style="width: 170px;"
    >
      <el-option v-for="item in provinces" :value="item" :key="item.code" :label="item.name"></el-option>
    </el-select>

    <el-select
      v-model="citySelected"
      @change="selectOneCity"
      value-key="code"
      placeholder="请选择所在城市"
      :class="{'display-none':hideCitySelect}"
      style="width: 203px;"
    >
      <el-option v-for="item in cities" :value="item" :key="item.code" :label="item.name"></el-option>
    </el-select>

    <el-select
      v-model="countySelected"
      @change="selectOneCounty"
      value-key="code"
      placeholder="请选择所在县"
      :class="{'display-none':hideCountySelect}"
      style="width: 130px;"
    >
      <el-option v-for="item in counties" :value="item" :key="item.code" :label="item.name"></el-option>
    </el-select>

    <el-select
      v-model="townSelected"
      @change="selectOneTown"
      value-key="code"
      placeholder="请选择所在乡镇"
      :class="{'display-none':hideTownSelect}"
      style="width: 170px;"
    >
      <el-option v-for="item in towns" :value="item" :key="item.code" :label="item.name"></el-option>
    </el-select>

    <el-select
      v-model="villageSelected"
      @change="selectOneVillage"
      value-key="code"
      placeholder="请选择所在村"
      :class="{'display-none':hideVillageSelect}"
    >
      <el-option v-for="item in villages" :value="item" :key="item.code" :label="item.name"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "areaChangeLinked",

  mounted() {
    // 发送请求拿所有省份
    this.$api.area.getProvinces().then(res => {
      if (!res) {
        return;
      }

      this.provinces = res.body;
    });
  },

  data() {
    return {
      // province
      provinces: [],
      provinceSelected: null,
      hideProvinceSelect: false,

      // city
      cities: [],
      citySelected: null,
      hideCitySelect: true,

      // county
      counties: [],
      countySelected: null,
      hideCountySelect: true,

      // town
      towns: [],
      townSelected: null,
      hideTownSelect: true,

      // village
      villages: [],
      villageSelected: null,
      hideVillageSelect: true
    };
  },

  methods: {
    selectOneProvince: function(item) {
      this.provinceSelected = item;

      // 清除其他级别低的options
      this.citySelected = null;
      this.hideCitySelect = false;

      this.countySelected = null;
      this.hideCountySelect = true;

      this.townSelected = null;
      this.hideTownSelect = true;

      this.villageSelected = null;
      this.hideVillageSelect = true;

      this.$api.area.getCities(item.code).then(res => {
        if (!res) {
          return;
        }

        this.cities = res.body;
      });
    },

    selectOneCity: function(item) {
      this.citySelected = item;

      // 清除其他级别低的options
      this.countySelected = null;
      this.hideCountySelect = false;

      this.townSelected = null;
      this.hideTownSelect = true;

      this.villageSelected = null;
      this.hideVillageSelect = true;

      this.$api.area.getCounties(item.code).then(res => {
        if (!res) {
          return;
        }

        this.counties = res.body;
      });
    },

    selectOneCounty: function(item) {
      this.countySelected = item;

      // 清除其他级别低的options
      this.townSelected = null;
      this.hideTownSelect = false;

      this.villageSelected = null;
      this.hideVillageSelect = true;

      this.$api.area.getTowns(item.code).then(res => {
        if (!res) {
          return;
        }

        this.towns = res.body;
      });
    },

    selectOneTown: function(item) {
      this.townSelected = item;

      // 清除其他级别低的options
      this.villageSelected = null;
      this.hideVillageSelect = false;

      this.$api.area.getVillages(item.code).then(res => {
        if (!res) {
          return;
        }

        this.villages = res.body;
      });
    },

    selectOneVillage: function(item) {
      console.log(item.name);
    }
  }
};
</script>

<style scoped>
.display-none {
  display: none;
}
</style>
